将画布输出为 PNG 图片文件

2D 绘图环境对图像操作有一些内置的支持，如果要将读取磁盘或者网络中的图像绘制在画布上，可以调用 drawImage() 方法。

canvas API 提供了一个 toDataURL() 方法，该方法返回一幅使用 canvas 绘制的图像，其返回值必须符合 data:URL 格式。

url = canvas.toDataURL([type, … ]);

如果没有指定返回图像类型时，返回的格式必须是 PNG 类型。如果 canvas 没有任何的像素，则返回值为" data:, "这是最短的 data:URL ，在 text/plain 资源中表现为空字符串。 type 的值可以在 image/png 、 images/jpeg 、 images/svg+xml 等 MIME 类型中选择。如果是 images/jpeg ，可以有两个参数，如果第二个参数的值在 0 ～ 1 之间，则表示 JPEG 的质量等级，否则使用浏览器内置默认质量等级。

向 Canvas 中引入图像

如果要向 Canvas 中引入图像，需要经过两个步骤：第一步是确定图像来源，第二步是使用 drawImage 方法将图像绘制到 Canvas 中。

HTML 5 中 Image 对象对应着一幅图像，如果要获取一个图像的对象，通常有 4 种方法。

• 通过 document.images 集合、 document.getElementsByTagName() 方法或者 document.getElementById() 方法获取网页内已经存在的图像对象

• 通过 document.getElementsByTagName() 方法或者 document.getElementById() 方法获取另一个 canvas 对象，将这个 canvas 对象作为一个图像对象

• 创建一个新的空的 Image 对象，然后再为该对象添加一个图像的超链接，这种方法最为常用
• 通过 data:url 方式嵌入图像， data urls 允许用一串 Base 64 编码的字符串的方式来定义一幅图像。它的优点就是图像内容即时可用，无须再到服务器兜一圈；可以将 CSS 、 JavaScript 、 HTML 和图像全部封装在一起，迁移起来非常方便。但是，它也存在着缺点，如图像没有缓存，如果图像大的话内嵌的 url 数据会相当的长

根据通常所需要的结果，绘制图像时常用的 drawImage() 函数有三种形式 。

直接传入

最简单的一种形式就是传入一个 image 对象、目标 x 坐标和 y 坐标，可以在指定位置绘制图像

context.drawImage(image, dx, dy);

调用 drawImage() 方法绘制图像时，如果第一个参数不是指定的元素类型，则会抛出一个 TYPE_MISMATCH_ERR 的异常错误；如果图像不能进行解码，则抛出 INVALID_STATE_ERR 异常；如果第二个参数不是允许的值，则抛出 SYNTAX_ERR 异常

改变大小

可以在上一种形式的基础上添加两个参数改变绘制图像的方法，这两个参数 dw 和 dh 分别表示绘制图像时的宽度和高度。它能缩放图像而不会影响变换矩阵

context.drawImage(image, dx, dy, dw, dh);

更改上面的代码，在页面中执行" context.drawImage(image, 10, 10, 20, 30) "时，图像被缩放成了 20px 宽度和 30px 高度

剪切图像

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

drawImage() 方法表示在画布中绘制图像的全部或者将图像的一部分复制到画布中的另一个位置。语法中的 9 个参数依次表示：要绘制的图像、源图像的 X 坐标、源图像的 Y 坐标、源图像的宽、源图像的高、目标图像的 X 坐标、目标图像的 Y 坐标、目标图像的宽、目标图像的高 如果没有指定 dw 和 dh 的值，则默认等于 sw 和 sh ，如果 sx 、 sy 、 sw 、 sh 都没有提供，则默认 sx 和 sy 的值都为 0,sw 和 sh 为图像的像素宽度和高度。

图像平铺

使用 createPatter() 方法，比较省事。

像素处理

使用图像的 getImageData() 方法可以获取像素。

var imagedata = context.getImageData(sx, sy, sw, sh);

参数 sx 和 sy 表示所获得区域的起点坐标，参数 sw 和 sh 表示获得区域的宽度和高度。

imageData 变量是一个 CanvasPixelArray 对象，具有 height 、 width 、 data 属性。 data 属性是一个保存像素点数据的数组，内容类似于 [r1,g1,b1,a1,r2,b2,g2,a2...]

利用像素绘制

使用 putImageData() 方法可以将像素组绘制在 canvas 上。

canvas 动画

结合 setInterval() 方法，不断地擦除重绘。但是 canvas 动画有从影。可以利用 CSS3 和 JavaScript 绘制更好的动态效果。

保存绘图

使用 canvas API 将推行保存在文件中。实现原理：把当前绘画状态输出到一个 Data URL 地址所指向数据的过程。

所谓的 Data URL ，是指目前大多数浏览器能识别的一种 base64 编码的 URL ，主要是体型小、可以在网页中直接嵌入，而不需要外部文件嵌入的数据。

Canvas API 使用 toDataURL() 方法把绘画状态输出到一个 URL

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = 'rgb(0, 0, 255)';

context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'rgb(255, 255, 0)';
context.fillRect(10, 20, 50, 50);
window.location = canvas.toDataURL('image/jpeg');

var globalId;
var i = 0;
var op = new Array(
  'source-atop',
  'source-in',
  'source-out',
  'source-over',
  'destination-atop',
  'destination-in',
  'destination-out',
  'destination-over',
  'lighter',
  'copy',
  'xor',
);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function draw() {
  Composite();
  setInterval(Composite, 3000);
}
function Composite() {
  i++;
  if (i > 10) i = 0;
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.save();
  context.font = '30px Georgia';
  context.fillText(op[i], 240, 130);
  context.fillStyle = 'blue';
  context.fillRect(0, 0, 100, 100);
  context.globalCompositeOperation = op[i];
  context.beginPath();
  context.fillStyle = 'red';
  context.arc(100, 100, 100, 0, Math.PI * 2, false);
  context.fill();
  context.restore();
}
draw();